import usePostComment from "@/app/[language]/forum/query/usePostComment";
import usePutComment from "@/app/[language]/forum/query/usePutComment";
import useWipeComment from "@/app/[language]/forum/query/useWipeComment";
import AvatarTitle from "@/components/AvatarTitle";
import { useTaehuiStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import { useMemo, useState } from "react";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
import { Button, Col, Collapse, Row } from "reactstrap";
import Swal from "sweetalert2";
import { getDatetime } from "taehui-ts/date";

export default observer(
  ({
    commentID,
    text,
    avatarID,
    avatarName,
    date,
    level,
  }: {
    commentID: number;
    text: string;
    date: string;
    avatarID: string;
    avatarName: string;
    level: number;
  }) => {
    const t = useTranslations();
    const { totem, taehuiAvatarID, taehuiAvatarName, isSU } = useTaehuiStore();

    const { essayID } = useParams<{ essayID: string }>();

    const [textInput, setTextInput] = useState("");
    const [targetTextInput, setTargetTextInput] = useState("");
    const [isTargetOpened, setTargetOpened] = useState(false);

    const isAllowModify = useMemo(
      () => isSU || taehuiAvatarID === avatarID,
      [isSU, avatarID, taehuiAvatarID],
    );

    const { mutateAsync: wipeComment } = useWipeComment();
    const { mutateAsync: putComment } = usePutComment();
    const { mutateAsync: postComment } = usePostComment();

    return (
      <div style={{ marginLeft: `${level * 3.5}rem` }}>
        <Row key={commentID} className="g-0">
          <AvatarTitle avatarID={avatarID} avatarName={avatarName}>
            <div
              className="route"
              onClick={() => {
                if (totem && !isTargetOpened) {
                  setTargetOpened(true);
                }
              }}
            >
              {isTargetOpened && isAllowModify ? (
                <Row className="g-0">
                  <Col className="m-1">
                    <ReactTextareaAutosize
                      className="form-control"
                      placeholder={t("text")}
                      defaultValue={text}
                      onChange={({ target: { value } }) => {
                        setTextInput(value);
                      }}
                    />
                  </Col>
                  <Col className="m-1" xs="auto">
                    <Button
                      color="warning"
                      onClick={async () => {
                        if (textInput) {
                          await putComment({ commentID, text: textInput });
                          setTargetOpened(false);
                        } else {
                          toast.error(t("failedValidation"));
                        }
                      }}
                    >
                      {t("doModifyComment")}
                    </Button>
                  </Col>
                  <Col className="m-1" xs="auto">
                    <Button
                      color="danger"
                      onClick={async () => {
                        if (
                          (
                            await Swal.fire({
                              title: "Taehui",
                              text: t("wipeCommentQuestion"),
                              icon: "question",
                              showDenyButton: true,
                            })
                          ).isConfirmed
                        ) {
                          await wipeComment({ commentID, totem });
                        }
                      }}
                    >
                      {t("wipeComment")}
                    </Button>
                  </Col>
                </Row>
              ) : (
                <span className="ln">{text}</span>
              )}
            </div>
          </AvatarTitle>
          <Col className="m-1" xs="auto">
            <span>{getDatetime(date)}</span>
          </Col>
        </Row>
        <Collapse isOpen={isTargetOpened} style={{ marginLeft: "3.5rem" }}>
          <Row className="g-0">
            <AvatarTitle
              avatarID={taehuiAvatarID}
              avatarName={taehuiAvatarName}
            >
              <Row className="g-0">
                <Col className="m-1">
                  <ReactTextareaAutosize
                    className="form-control"
                    placeholder={t("text")}
                    value={targetTextInput}
                    onChange={({ target: { value } }) => {
                      setTargetTextInput(value);
                    }}
                  />
                </Col>
                <Col className="m-1" xs="auto">
                  <Button
                    color="success"
                    onClick={async () => {
                      if (targetTextInput) {
                        await postComment({
                          essayID,
                          targetCommentID: commentID,
                          text: targetTextInput,
                        });
                        setTargetOpened(false);
                      } else {
                        toast.error(t("failedValidation"));
                      }
                    }}
                  >
                    {t("postComment")}
                  </Button>
                </Col>
              </Row>
            </AvatarTitle>
          </Row>
        </Collapse>
      </div>
    );
  },
);